<template>
  <div class="el-scroll-box">
    <el-scrollbar>
      <!-- 轮播图 -->
      <el-carousel height="300px">
        <el-carousel-item v-for="item in banner" :key="item.id">
          <img :src="item.url" alt="" width="100%" height="100%" object-fit="cover">
        </el-carousel-item>
      </el-carousel>
      <!-- 内容 -->
      <div class="content">
        <template v-if="!Global.isEmptyObject(contentList)">
          <div v-for="(item, key) in contentList" :key="key" class="content-list">
            <h3>{{ key }}</h3>
            <div class="content-item">
              <div v-for="it in item" :key="it.id" class="c-item">
                <h4 class="c-title">{{ it.name }}</h4>
                <span class="c-desc">{{ it.remark }}</span>
                <div class="start-study" @click="toStudyLine(it, key)">
                  开始学习
                  <i class="el-icon-arrow-right" />
                </div>
              </div>
            </div>
          </div>
        </template>
        <empty-data v-else text="暂无数据" />
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import Global from '../../../public/js/global'
import EmptyData from '@/components/EmptyData'
import { getLearnGroupQuery } from '@/api/learnCenter'
import Main_banner from '@/assets/user/Main_banner.jpg'
export default {
  name: 'Dashboard',
  components: {
    EmptyData
  },
  data() {
    return {
      Global,
      contentList: {},
      banner: [{ id: 1, url: Main_banner }]
    }
  },
  created() {
    this.initWindow()
  },
  mounted() {

  },

  destroyed() {
  },
  methods: {
    initWindow() {
      const vPar = new this.ParamArr()
      getLearnGroupQuery(vPar).then(vPar => {
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_learn_book'))
        // console.log('table')
        // console.log(table)
        table.first()
        while (!table.eof()) {
          const node = {}
          node['rootID'] = table.getValueByName('RootID') // 分类
          node['rootName'] = table.getValueByName('RootName')
          node['id'] = table.getValueByName('ID')
          node['name'] = table.getValueByName('Name')
          node['remark'] = table.getValueByName('Remark')
          node['bookIDs'] = table.getValueByName('BookIDs') // 课程
          node['bookNames'] = table.getValueByName('BookNames').split(',')
          nodes.push(node)
          table.next()
        }

        const dataObj = {}
        nodes.forEach(item => {
          if (dataObj[item['rootName']]) {
            dataObj[item['rootName']].push(item)
          } else {
            dataObj[item['rootName']] = [item]
          }
        })
        // console.log('dataObj')
        // console.log(dataObj)
        this.contentList = dataObj
      })
    },
    toStudyLine(item, key) {
      this.$openUrl('StudyLine', '', { id: item.id, name: item.name, pName: key }, { id: item.id })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-scroll-box {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/user/Main_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  .el-scrollbar {
    height:100%
  }
}

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }

.content {
  width: 80%;
  margin: 0 auto;
  .content-item {
    display: flex;
    flex-wrap: wrap;
    .c-item {
      margin-bottom: 10px;
      margin-right: 10px;
      width: 350px;
      flex-shrink: 0;
      padding: 10px;
      display: flex;
      flex-direction: column;
      background-image: url('../../assets/dashboard/card_background.png');
      background-repeat: no-repeat;
      background-size: cover;
      .c-title {
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid #aaa;
      }
      .c-desc {
        margin-top: 20px;
        font-weight: 400;
        font-size: 13px;
        border-left: 2px solid $primaryColor;
        padding-left: 5px;
        color: #888888;
      }
      .start-study {
        margin-top: 1rem;
        margin-bottom: 1rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
        color: #fff;
        background-color: $plainColor;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        &:hover {
          background-color: $primaryColor;
        }
      }
    }
  }
}
</style>
